<template>
  <div class="x-catalogue-menu">
    <template v-if="data">
      <x-catalogue-menu-item-iteration
        v-for="item in data"
        :title="item.title"
        :index="item.index"
        :children="item.children"
      ></x-catalogue-menu-item-iteration>
    </template>
  </div>
</template>

<script setup name="XCataloguMenu">
import { ref, provide } from 'vue'

const props = defineProps({
  data: Array, // Array<{ title, index, children }>
  anchorAttr: {
    type: String,
    default: 'data-index',
  },
})
const emit = defineEmits(['clickMenuItem'])

const data = ref(props.data)
const activedId = ref()

function clickMenuItem(menuItem) {
  activedId.value = menuItem.index
  emit('clickMenuItem', menuItem)
}

function select(id) {
  activedId.value = id
}

function setData(d) {
  data.value = d
}

provide('clickMenuItem', clickMenuItem)
provide('activedId', activedId)

defineExpose({ select, setData })
</script>

<style lang="scss" scoped>
.x-catalogue-menu {
  font-size: 12px;
  line-height: 24px;
  color: #999;
  .u-children {
    .u-trigger {
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
    &[data-layer='1'] {
      padding-left: 10px;
    }
    &[data-layer='2'] {
      padding-left: 20px;
    }
  }
}
</style>
